<!-- 攻拔项目概览 -->
<template>
  <ModelTile class="gbxm" title="攻拔项目概览">
    <!-- 1####### -->
    <div class="a gbxm-item">
      <div class="a-top">
        <div class="a-item">
          <div class="title">
            <span class="dot"></span>
            <span>攻拔项目（个）</span>
          </div>
          <div class="value">{{ conquerProData.gcbzProNum }}</div>
        </div>
        <div class="a-item">
          <div class="title">
            <span class="dot"></span>
            <span>年度计划投资（亿）</span>
          </div>
          <div class="value">{{ conquerProData.gcbzProAmount }}</div>
        </div>
      </div>
      <div class="a-bottom">
        <div class="a-item">
          <div class="title">
            <span class="dot"></span>
            <span>累计完成投资（亿）</span>
          </div>
          <div class="value">{{ conquerProData.gcbzProYtd }}</div>
        </div>
        <div class="a-item">
          <div class="title">
            <span class="dot"></span>
            <span>完成率（%）</span>
          </div>
          <div class="value">{{ conquerProData.gcbzProCr }}</div>
        </div>
      </div>
    </div>
    <!-- 2####### -->
    <div class="b gbxm-item scrollbar">
      <ZTable
        :columns="columns"
        :data-source="gcbzProSectorStatInfo"
        size="small"
        :pagination="false"
      >
        <template #bodyCell="{ column, text }">
          <div v-if="column.dataIndex == 'sectorType'">
            {{ sectorNameTypes.find((type) => type.value == text)?.label }}
          </div>
          <div v-if="column.dataIndex == 'gcbzProNum'">{{ text }}个</div>
          <div v-if="column.dataIndex == 'gcbzProYtd'">{{ text }}亿</div>
          <div v-if="column.dataIndex == 'gcbzProAmount'">{{ text }}亿</div>
          <div v-if="column.dataIndex == 'gcbzProCr'">{{ text }}%</div>
        </template>
      </ZTable>
    </div>
    <!-- 3####### -->
    <div class="c gbxm-item">
      <div class="c-left">
        <div class="title">前三区域</div>
        <div class="value" v-for="item in gcbzProTopThreeList" :key="item.area">
          <span class="order">{{ item.order }}. </span>
          {{ item.label }}
        </div>
      </div>
      <div class="c-right">
        <div class="title">后三区域</div>
        <div class="value" v-for="item in gcbzProLastThreeList" :key="item.area">
          <span class="order">{{ item.order }}. </span>
          {{ item.label }}
        </div>
      </div>
    </div>
    <!-- 4####### -->
    <div class="d gbxm-item">
      <div class="d-top">
        <div class="d-item">
          <div class="title">
            <span class="dot"></span>
            <span>滞后项目（个）</span>
          </div>
          <div class="value">{{ LaggingProData.gcbzProLaggingNum }}</div>
        </div>
      </div>
      <div class="d-bottom">
        <div class="d-item">
          <div class="title">
            <span class="dot"></span>
            <span>实际开工/计划开工（个）</span>
          </div>
          <div class="value">
            {{ LaggingProData.gcbzProAsNum }}/{{ LaggingProData.gcbzProPsNum }}
          </div>
        </div>
      </div>
    </div>
  </ModelTile>
</template>

<script lang="ts">
import { ref, defineComponent, computed } from 'vue'
import ModelTile from '@/components/modleTitle/index.vue'
import ZTable from '@/components/z-table/index'
import { Column } from '@/interface/table'
import { useRouter } from 'vue-router'
export default defineComponent({
  name: 'gbxm',
  components: {
    ModelTile,
    ZTable
  },
  props: {
    // 父级统计数据
    statAllData: {
      type: Object,
      default: {}
    }
  },
  setup(props) {
    const router = useRouter()
    const sectorNameTypes = [
      { value: '0', label: '总体情况' },
      { value: '1', label: '基础设施' },
      { value: '2', label: '工业投资' },
      { value: '3', label: '房地产' },
      { value: '4', label: '社会民生' },
      { value: '5', label: '其他领域' }
    ]
    // 表头
    const columns: Column[] = [
      {
        dataIndex: 'sectorType',
        title: '名称',
        width: '24%',
        ellipsis: true,
        align: 'left'
      },
      {
        dataIndex: 'gcbzProNum',
        title: '项目数',
        width: '15%',
        ellipsis: true,
        align: 'center'
      },
      {
        dataIndex: 'gcbzProAmount',
        title: '年度投资',
        width: '22%',
        ellipsis: true,
        align: 'right'
      },
      {
        dataIndex: 'gcbzProYtd',
        title: '累计完成',
        width: '22%',
        ellipsis: true,
        align: 'right'
      },
      {
        dataIndex: 'gcbzProCr',
        title: '完成率',
        width: '17%',
        ellipsis: true,
        align: 'right'
      }
    ]
    // 列表数据
    const listData = ref([
      { gcbzProAmount: '60', gcbzProCr: '50', gcbzProNum: '10', gcbzProYtd: '30', sectorType: '3' },
      { gcbzProAmount: '50', gcbzProCr: '40', gcbzProNum: '8', gcbzProYtd: '20', sectorType: '1' },
      { gcbzProAmount: '50', gcbzProCr: '80', gcbzProNum: '10', gcbzProYtd: '40', sectorType: '4' },
      { gcbzProAmount: '50', gcbzProCr: '40', gcbzProNum: '8', gcbzProYtd: '20', sectorType: '5' }
    ]) as any

    // 通过计算属性实时获取父级传递的 列表数据
    const gcbzProSectorStatInfo = computed(
      () => props.statAllData?.gcbzResult?.gcbzProSectorStatInfo || listData.value
    )

    // 排名数据
    // const areaList = ref([
    //     { order: '01', label: "增城区", area: "zengcheng" },
    //     { order: '02', label: "从化区", area: "conghua" },
    //     { order: '03', label: "南沙区", area: "nansha" },
    //     { order: '04', label: "花都区", area: "huadu" },
    //     { order: '05', label: "番禺区", area: "panyu" },
    //     { order: '06', label: "黄埔区", area: "huangpu" },
    //     { order: '07', label: "白云区", area: "baiyun" },
    //     { order: '08', label: "天河区", area: "tianhe" },
    //     { order: '09', label: "海珠区", area: "haizhu" },
    //     { order: '10', label: "越秀区", area: "yuexiu" },
    //     { order: '11', label: "荔湾区", area: "liwan" },
    // ]) as any
    // 通过计算属性实时获取父级传递的 前三区域统计数据
    const gcbzProTopThreeList = computed(
      () =>
        props.statAllData?.gcbzResult?.gcbzProTopThreeList || [
          { order: '01', label: '增城区', area: 'zengcheng' },
          { order: '02', label: '从化区', area: 'conghua' },
          { order: '03', label: '南沙区', area: 'nansha' }
        ]
    )

    // 通过计算属性实时获取父级传递的 后三区域模块统计数据
    const gcbzProLastThreeList = computed(
      () =>
        props.statAllData?.gcbzResult?.gcbzProLastThreeList || [
          { order: '09', label: '海珠区', area: 'haizhu' },
          { order: '10', label: '越秀区', area: 'yuexiu' },
          { order: '11', label: '荔湾区', area: 'liwan' }
        ]
    )

    // 通过计算属性实时获取父级传递的 攻拔项目模块统计数据
    const conquerProData = computed(() => {
      return {
        gcbzProNum: props.statAllData?.gcbzResult?.gcbzProStatInfo?.gcbzProNum || '100',
        gcbzProAmount: props.statAllData?.gcbzResult?.gcbzProStatInfo?.gcbzProAmount || '86',
        gcbzProYtd: props.statAllData?.gcbzResult?.gcbzProStatInfo?.gcbzProYtd || '58',
        gcbzProCr: props.statAllData?.gcbzResult?.gcbzProStatInfo?.gcbzProCr || '67'
      }
    })

    // 通过计算属性实时获取父级传递的 滞后项目模块统计数据
    const LaggingProData = computed(() => {
      return {
        gcbzProLaggingNum: props.statAllData?.gcbzResult?.gcbzProLaggingNum || '100',
        gcbzProAsNum: props.statAllData?.gcbzResult?.gcbzProAsNum || '86',
        gcbzProPsNum: props.statAllData?.gcbzResult?.gcbzProPsNum || '58'
      }
    })

    function init() {
      console.log('请求数据')
    }

    // 跳转页面
    function toLink(url: string) {
      router.push({
        path: url
      })
    }

    init()
    return {
      columns,
      sectorNameTypes,
      gcbzProSectorStatInfo,
      gcbzProTopThreeList,
      gcbzProLastThreeList,
      conquerProData,
      LaggingProData,

      toLink
    }
  }
})
</script>
<style lang="scss" scoped>
.gbxm {
  height: 100%;
  color: #fff;

  .gbxm-item {
    border-radius: 12vh * $Bh;
    background-color: #163169;

    &.a {
      height: 400vh * $Bh;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;

      .a-top,
      .a-bottom {
        display: flex;
        justify-content: space-between;

        .a-item {
          width: 50%;
          padding-top: 50vh * $Bh;
          padding-left: 42vw * $Bw;

          .title {
            display: flex;
            align-items: center;

            .dot {
              width: 12vw * $Bw;
              height: 12vh * $Bh;
              border-radius: 50%;
              margin-right: 6vw * $Bw;
              background-color: #69beff;
              box-shadow: 0 0 12vh * $Bh 0 #69beff;
            }

            span:not(.dot) {
              padding-left: 12vw * $Bw;
            }

            font-size: 30vh * $Bh;
            line-height: 1;
          }

          .value {
            font-size: 36vh * $Bh;
            line-height: 116vh * $Bh;
            font-weight: bold;
            padding-left: 34vw * $Bw;
          }
        }
      }
    }

    &.b {
      height: 490vh * $Bh;
      padding: 20vh * $h 30vw * $w;
    }

    &.c {
      height: 344vh * $Bh;
      background-color: transparent;
      display: flex;

      .c-left {
        margin-right: 20vw * $Bw;
      }

      .c-left,
      .c-right {
        flex: 1;
        height: 100%;
        padding: 16vh * $Bh 32vw * $Bw;
        border-radius: 12vh * $Bh;
        background-color: #163169;

        .title {
          font-size: 28vh * $Bh;
          line-height: 76vh * $Bh;
          font-weight: bold;
        }

        .value {
          font-size: 30vh * $Bh;
          line-height: 74vh * $Bh;

          .order {
            color: #ffffffcc;
          }
        }
      }
    }

    &.d {
      height: 384vh * $Bh;

      .d-top,
      .d-bottom {
        display: flex;
        justify-content: space-between;

        .d-item {
          width: 100%;
          padding-top: 30vh * $Bh;
          padding-left: 42vw * $Bw;

          .title {
            display: flex;
            align-items: center;

            .dot {
              width: 12vw * $Bw;
              height: 12vh * $Bh;
              border-radius: 50%;
              margin-right: 6vw * $Bw;
              background-color: #69beff;
              box-shadow: 0 0 12vh * $Bh 0 #69beff;
            }

            span:not(.dot) {
              padding-left: 12vw * $Bw;
            }

            font-size: 30vh * $Bh;
            line-height: 1;
          }

          .value {
            font-size: 36vh * $Bh;
            line-height: 116vh * $Bh;
            font-weight: bold;
            padding-left: 34vw * $Bw;
          }
        }
      }
    }

    & + .gbxm-item {
      margin-top: 24vh * $Bh;
    }
  }
}
</style>
